<template>
  <div>
    <div class="han_filter">
      <el-input v-model="params.name" placeholder="权限名"></el-input>
      <el-button
        type="primary"
        size="default"
        icon="el-icon-search"
        plain
        @click="searchMethod"
        >搜索</el-button
      >
      <el-button
        type="primary"
        size="default"
        plain
        @click="add(0)"
        icon="el-icon-zoom-in"
        >添加资源</el-button
      >
    </div>

    <el-dialog
      :title="dialog.title"
      v-model="dialog.show"
      :close-on-click-modal="false"
      width="450px"
    >
      <ResourceEdit
        v-model:show="dialog.show"
        v-if="dialog.show"
        style="text-align: center"
        :editId="dialog.id"
        @getTable="getTable"
        :parentId="dialog.parentId"
      >
      </ResourceEdit>
    </el-dialog>
    <!-- 用户数据表 
		row-key当作行索引
		-->
    <el-table
      class="table"
      border
      :data="tableData"
      row-key="id"
      :cell-style="{
        color: '#666',
        fontFamily: 'Arial',
        fontSize: '15px',
        'font-weight': '900',
      }"
      :header-cell-style="{
        background: '#f0f9eb',
        fontFamily: 'Helvetica',
        fontSize: '18px',
      }"
    >
      <el-table-column prop="name" label="资源名称" width="320" />
      <el-table-column prop="frontUrl" label="前端地址"> </el-table-column>
      <el-table-column prop="backUrl" label="后端地址"> </el-table-column>
      <el-table-column prop="type" label="资源类型" width="120">
        <template v-slot="scope">
          <span v-if="scope.row.type === 1">目录</span>
          <span v-else>按钮</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="240">
        <template v-slot="scope">
          <!-- 为某个资源添加下级，也就是说，他就是所有下级的父id -->
          <el-button
            v-if="scope.row.type === 1"
            size="small"
            type="primary"
            @click="add(scope.row.id)"
            plain
            >追加下级</el-button
          >
          <el-button size="small" type="warning" @click="edit(scope.row.id)"
            >修改</el-button
          >
          <el-button size="small" type="danger" @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ResourceEdit from "./edit.vue";
import resourceApi from "@/api/user/resource";
import { ElMessage } from "element-plus";
export default {
  name: "ResourceList",
  data() {
    return {
      url: {
        // 资源管理不分页
        query: "/ums-resource/list",
        del: "/ums-resource/del",
      },
      //不分页情况下使用数组
      tableData: [],
      // 用于获取数据所在的页数
      params: {
        name: "",
      },
      pages: 0,
      // 添加页显示状态
      dialog: {
        show: false,
        title: "",
        id: null,
        parentId: null,
      },
    };
  },
  components: {
    ResourceEdit,
  },
  created() {
    this.getTable();
  },
  methods: {
    //获取数据
    getTable() {
      resourceApi.get().then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          console.log(this.tableData);
        }
      });

      //   this.myGet(this.url.query, this.params, (response) => {
      //     this.tableData = response.obj;
      //     this.pages = response.obj.pages;
      //   });
    },
    edit(id) {
      this.dialog.show = true;
      this.dialog.title = "修改资源";
      this.dialog.id = id;
    },
    add(parentId) {
      console.log("parentId" + parentId);
      this.dialog.show = true;
      this.dialog.title = "添加资源";
      this.dialog.id = null;
      this.dialog.parentId = parentId;
    },

    searchMethod() {
      this.params.pageNO = 1;
      this.getTable();
    },

    // 删除数据
    del(id) {
      this.$confirm("该数据将永久删除，不能再恢复，是否删除？", "删除数据", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        resourceApi.del(id).then((res) => {
          if (res.data.code === 200) {
            ElMessage.success("删除成功");
            this.getTable();
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid #000000;
}
.table {
  border-top: 2px solid #000000;
}
</style>
